<div class="dao-autocomplete">
  <dao-input type="text"
    ref="reference"
    :placeholder="placeholder"
    v-model="inputText"
    icon-inside
    :message="errorMsg"
    :status="inputStatus"
    @keyup="keyup"
    @keyup.up="upArrow"
    @keyup.down="downArrow"
    @keyup.enter="enter"
    @focus="show"
    @blur="blur"></dao-input>
  <div class="dao-autocomplete-dropdown dao-autocomplete-popper" ref="popper" v-show="visible && filteredOption.length > 0">
    <ul class="dao-autocomplete-ul">
      <li class="dao-autocomplete-li"
        v-for="(o, index) in filteredOption"
        :class="{current: optionIndex === index}"
        @mouseover="hoverOption(index)"
        @mousedown="clickOption()">
        {{ o.text }}
      </li>
    </ul>
  </div>
</div>
